<template>
  <div v-if="rows || value"
       :class="{'red': flags}">
    <p>
      <Tooltip v-if="iconName"
               :content="content"
               :placement="placement">
        <icon-svg class-name="iconClass mr5"
                  :icon-name="iconName" />
      </Tooltip>
      {{ rows.showCustomerName || rows.customerName }}
    </p>
    <p>{{ shipperInformation}}</p>
  </div>
</template>

<script>
/**
 * @value 发货方运单信息配置
 * @FileDescription 为什么运单的需要value配置而订单不需要，是因为数据结构不同，订单信息会包一层
 * @param {Object} {
 *  "contactName": "${fromContactName}",
 *  "contactMobile": "${fromContactMobile}"
 * }
 * **/
import Tooltip from "@components/basic/Tooltip.vue";
export default {
  name: 'ShipmentSenderInfo',
  components: {
    Tooltip
  },
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    value: {
      type: Object,
      default: () => { }
    },
    flag: {
      type: [String, Function],
      default: ""
    },
    type: String
  },
  computed: {
    rows () {
      return this.row
    },
    shipperInformation () {
      return this.value ? this.valueShippingContact : this.shippingContact
    },
    // 订单
    shippingContact () {
      return `${this.row?.fromAddress?.contactName || ''} ${this.row?.fromAddress?.contactMobile || ''}`
    },
    // 运单
    valueShippingContact () {
      return `${this.value?.contactName || ''} ${this.value?.contactMobile || ''}`
    },
    defaults () {
      return true
    },
    flags () {
      return this.flag || ''
    },
    placement () {
      return 'top'
    },
    content () {
      if (this.type === 'order') {
        return this.row?.customerType === 0 ? '线下' : ''
      } else {
        switch (this.row.showCustomerType) {
          case 0:
            return '线下';
          case 1:
            return '线上';
          default:
            return '';
        }
      }
    },
    iconName () {
      if (this.type === 'order') {
        return this.row?.customerType === 0 ? 'xianxia' : ''
      } else {
        switch (this.row.showCustomerType) {
          case 0:
            return 'xianxia';
          case 1:
            return 'xianshang';
          default:
            return '';
        }
      }
    }
  }
}
</script>

<style scoped>
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
}
.red {
  color: var(--prev-color-text-red) !important;
}
.red >>> p {
  margin: 0 !important;
}
.iconClass {
  width: 14px;
  height: 14px;
}
</style>